<script setup lang="ts">
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Breadcrumb from '@/components/ui/Breadcrumb.vue'
import type { BreadcrumbItem } from '@/types/common'
import { computed } from 'vue'
import { useRequestProvider } from 'vue-hooks-plus'
import { useRoute } from 'vue-router'
import { Toaster } from 'vue-sonner'

useRequestProvider({ onError: err => console.error(err) })

const route = useRoute()

const routeMap = {
  '/point-groups': 'header.pointGroups',
  '/space-groups': 'header.spaceGroups',
  '/magnetic-groups': 'header.magneticGroups',
  '/spin-groups': 'header.spinGroups'
}

const showBreadcrumb = computed(() => route.path !== '/' && route.name !== 'NotFound')

const breadcrumbItems = computed(() => {
  const items: BreadcrumbItem[] = [{ label: 'header.home', to: '/' }]
  const path = route.path

  for (const [listPath, config] of Object.entries(routeMap)) {
    if (path.startsWith(listPath)) {
      items.push({ label: config, to: listPath })
      if (route.params.groupId) items.push({ label: route.params.groupId as string })
      break
    }
  }

  return items
})
</script>

<template>
  <Toaster position="top-center" richColors />
  <section class="bg-base-200 flex min-h-screen min-w-0 flex-col">
    <Header></Header>

    <!-- Main panel -->
    <router-view v-slot="{ Component, route }">
      <transition name="fade" mode="out-in">
        <div :key="route.path" class="container mx-auto flex flex-1 flex-col">
          <Breadcrumb v-if="showBreadcrumb" class="py-4" :items="breadcrumbItems" />
          <component :is="Component" />
        </div>
      </transition>
    </router-view>

    <Footer></Footer>
  </section>
</template>
